<% include header_index.html %>


    <style>
        .header {
            width: 100vw;
            background: linear-gradient(to right, #fe9b0c, #ff8000);
        }
        
        body {
            background: rgb(239, 239, 244);
        }
        
        .header_l {
            width: 50vw;
            float: left;
            height: 44px;
            line-height: 44px;
        }
        
        .header_r {
            width: 50vw;
            float: left;
            height: 44px;
            line-height: 44px;
        }
        
        .header_l_title {
            float: right;
            margin-right: 10px;
            font-size: 15px;
            color: white;
        }
        
        .header_r_title {
            float: left;
            margin-left: 10px;
            font-size: 15px;
            color: white;
        }
        
        .gelan_l {
            position: relative;
            width: 20px;
            height: 3px;
            background: white;
            top: 33px;
            right: -155px;
            float: left;
        }
        
        .gelan_r {
            float: right;
            position: relative;
            width: 20px;
            height: 3px;
            background: white;
            top: 33px;
            right: 155px;
        }
        
        .share_div_list {
            width: 100vw;
        }
        
        .share_div {
            background: white;
            margin-top: 10px;
            float: left;
            width: 100vw;
        }
        
        .share_top {
            width: 100vw;
            height: 70px;
            margin-top: 10px;
            background: white;
        }
        
        .member_img {
            width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
        }
        
        .member_id {
            width: 200px;
            height: 20px;
            line-height: 20px;
            margin-top: 5px;
            font-size: 15px;
            color: #454545;
            float: left;
        }
        
        .register_date {
            width: 200px;
            line-height: 18px;
            float: left;
            color: #adadad;
            height: 18px;
            font-size: 13px;
            padding-top: 15px;
        }
        
        .add_btn {
            width: 80px;
            height: 25px;
            border-radius: 4px;
            border: 1px solid #fe9b0c;
            line-height: 25px;
            text-align: center;
            float: left;
            color: #fe9b0c;
        }
        
        .share_main {
            width: 100vw;
            height: 102px;
        }
        
        .goods_name {
            margin: 0 10px;
            font-size: 15px;
            color: #454545;
            line-height: 20px;
            margin-top: 10px;
            height: 40px;
        }
        
        .share_res {
            margin: 0 10px;
            font-size: 13px;
            color: #adadad;
            line-height: 18px;
            margin-top: 10px;
        }
        
        .share_img_div {
            border-bottom: 1px solid rgb(239, 239, 244);
            background: white;
            width: 365px;
            /* margin: 0 auto; */
            padding: 0 5px;
            padding-bottom: 20px;
        }
        
        .two {
            height: 240px !important;
        }
        
        .one {
            height: 115px;
        }
        
        .share_img {
            width: 115px;
            height: 115px;
            float: left;
            margin-left: 5px;
            margin-top: 10px;
        }
        
        .share_bottom {
            width: 100vw;
            background: white;
            height: 40px;
        }
        
        .zan {
            width: 15px;
            margin: 12.5px 10px;
        }
        
        .zan_num {
            line-height: 40px;
            font-size: 15px;
            color: #fe9b0c;
        }
        
        .shop {
            width: 52px;
            height: 20px;
            background: #fe9b0c;
            color: white;
            font-size: 13px;
            line-height: 20px;
            text-align: center;
            border-radius: 4px;
            float: right;
            margin: 10px;
        }
    </style>

    <div class="big_div">
        <div class="header h44">
            <div class="header_l">
                <p class="header_l_title" @click="change_type('new')">最新</p>
                <div class="gelan_l" v-if="type=='new'"></div>
            </div>
            <div class="header_r">
                <p class="header_r_title" @click="change_type('hot')">最热</p>
                <div class="gelan_r" v-if="type=='hot'"></div>
            </div>
        </div>
        <!-- 头部 -->
        <div class="share_div_list">
            <div class="share_div" v-for="(share,index) in share_list">
                <div class="share_top">
                    <img src="images/default_wap/load.png" :data-src="'http://www.phmall.com.ph/union/'+share.member_image" class="member_img" alt="">
                    <p class="member_id">
                        {{share.member_id}}
                    </p>
                    <p class="register_date">发布时间：{{share.register_date}}</p>
                    <div class="add_btn" @click="friend(share.m_uid)">添加好友</div>
                </div>
                <div class="share_main">
                    <p class="goods_name sl2">
                        {{share.goods_name}}
                    </p>
                    <p class="share_res">晒单理由：{{share.comment}}</p>
                    <div class="share_img_div one" v-bind:class="{two:share.pics.length>2}">
                        <img src="images/default_wap/load.png" class="share_img" alt="" v-for="pic in share.pics" :data-src="'http://www.phmall.com.ph/'+pic">

                    </div>
                    <div class="share_bottom">
                        <img src="images/default_wap/zan2.png" class="zan fl" alt="">
                        <p class="zan_num fl" @click="love(share.uid,index)">{{share.love,index}}人喜欢</p>
                        <a :href="share.url+share.g_uid">
                            <div class="shop">去购买</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
    <% include bottom_div.html %>

        <script>
            var page = new Vue({
                el: '.big_div',
                data: {
                    type: '<%= type %>',
                    start: 0,
                    share_list: []
                },
                methods: {
                    love: function(uid, index) {
                        var t = this;


                        if (localStorage.getItem("love_" + uid)) {

                        } else {
                            localStorage.setItem("love_" + uid, true);
                            $.post("./share/love", {
                                uid: uid
                            }, function(result) {
                                result = result.data;
                                if (result == 1) {
                                    t.share_list[index].love++;
                                } else {
                                    localStorage.setItem("love_" + uid, false);
                                }

                            })
                        }

                    },
                    friend: function(uid) {
                        $.post('/share/friend', {
                            uid: uid
                        }, function(result) {
                            result = result.data;
                            if (result == 0) {
                                $.toptip("您和对方已经是好友了哦~", 'error');
                            } else if (result == 1) {
                                $.toptip('添加好友成功', 'success');
                            } else {
                                window.location.href = "./login";
                            }
                        });
                    },
                    change_type: function(type) {

                        this.type = type;
                        this.share_list = [];
                        var t = this;
                        this.start = 0;
                        $.post('/share', {
                            type: this.type,
                            start: this.start
                        }, function(result) {
                            result = result.data;
                            if (result != 0 && result.length > 0) {
                                result.forEach(function(item, index) {
                                    item.register_date = return_date(item.register_date);
                                    t.share_list.push(item);
                                    t.start++;
                                }, this);
                            }
                        });
                    }
                },
                mounted: function() {
                    $(".weui-tabbar").find("a").eq(2).addClass('weui-bar__item--on').find('img').attr('src', './images/default_wap/fx1.png');
                    var t = this;
                    $.post('/share', {
                        type: this.type,
                        start: this.start
                    }, function(result) {
                        console.log(result);
                        result = result.data;
                        if (result != 0 && result.length > 0) {
                            result.forEach(function(item, index) {
                                item.register_date = return_date(item.register_date);
                                t.share_list.push(item);
                                t.start++;
                            }, this);
                        }
                    });
                }
            });



            $(document.body).infinite();
            var loading = false; //状态标记
            $(document.body).infinite().on("infinite", function() {
                if (loading) return;
                loading = true;
                var t = page;

                $.post('/share', {
                    type: t.type,
                    start: t.start
                }, function(result) {
                    result = result.data;
                    if (result != 0 && result.length > 0) {
                        result.forEach(function(item, index) {
                            item.register_date = return_date(item.register_date);
                            t.share_list.push(item);
                            t.start++;
                        }, this);
                        loading = false;
                    }
                });

            });
        </script>
        <% include footer.html %>